<template>
  <div class="roleAddPage">
    <div class="back" @click="back()">
      <i class="el-icon-arrow-left"></i>返回
    </div>
    <el-form
      class="addForm"
      ref="form"
      :model="roleForm"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="用户名：" prop="userName">
        <el-input v-model="roleForm.userName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="昵称：" prop="name">
        <el-input v-model="roleForm.name" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="手机号：" prop="phone">
        <el-input v-model="roleForm.phone" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="权限：" prop="roleId">
        <el-select v-model="roleForm.roleId"  clearable placeholder="">
          <el-option
            v-for="item in userRole"
            :key="item.id"
            :label="item.roleName"
            :value="item.roleId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="add">
        <el-button class="submitBtn" type="primary" @click="submitForm()"
          >确 定</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addUserApi, getRoleInfoApi, updataUserApi } from '@/api/user'

export default {
  name: 'SevencolorUserIndex',

  data () {
    return {
      roleForm: {
        baseId: 1,
        password: '',
        userId: ''
      },
      userRole: [],
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        roleId: [{ required: true, message: '请选择权限', trigger: 'change' }]
      }
    }
  },

  mounted () {
    this.roleDict()
  },
  watch: {

  },
  methods: {
    // 18351581309
    submitForm () {
      this.$refs.form.validate((valid) => {
        if (this.roleForm.userId !== '') {
          this.roleForm.userId = +this.roleForm.userId
        }
        console.log(this.roleForm)
        console.log(this.$route.query)
        if (valid) {
          if (this.$route.query.pageId === '1') {
            this.roleForm.baseId = this.$store.getters.userInfo.baseId
            const res = addUserApi(this.roleForm)
            console.log(res)
          } else {
            this.roleForm.baseId = this.$store.getters.userInfo.baseId
            const res = updataUserApi(this.roleForm)
            console.log(res)
          }
        } else {
          // Form is invalid, do something
          console.log('错误')
        }
      })
    },
    back () {
      this.$router.push({
        path: '/shuzhongtian/agriRole'
      })
    },
    // 权限字典
    async roleDict () {
      const res = await getRoleInfoApi()
      this.userRole = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.roleAddPage {
  width: 80.2083vw;
  height: 48.4375vw * 0.834;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  .back {
    font-size: 1.0417vw;
  }
  .addForm {
    width: 36.9792vw;
    margin: 6.25vw * 0.834 auto 0;
    .add {
      margin-top: 5vw;
    }
  }
  .submitBtn {
    width: 19.7917vw;
    height: 3.125vw * 0.834;
    background: #19b560;
    border-radius: 12px 12px 12px 12px;
  }
  ::v-deep .el-input__inner {
    width: 25.7292vw !important;
  }
  ::v-deep .el-form-item__label {
    width: 5.2083vw !important;
  }
  ::v-deep .el-form-item__content {
    margin-left: 5.2083vw !important;
  }
}
</style>
